<!-- 切换主题色  -->
<template>
  <div>
    <el-color-picker @change='colorChange' v-model='colors.primary'></el-color-picker>
  </div>
</template>

<script lang='ts'>
import generateColors from '../utils/color'
import objectAssign from 'object-assign'
import { Component, Provide, Emit, Vue } from 'vue-property-decorator'

@Component
export default class Theme extends Vue {
  @Provide() originalStylesheetCount: -1 // 记录当前已引入style数量
  @Provide() originalStyle: '' // 获取拿到的.css的字符串
  @Provide() colors: {
    // 颜色选择器默认颜色值,这个值要和element-variables一样
    primary: '#08B3E9'
  }
  @Provide() primaryColor: String // 提交成功后设置默认颜色
  @Provide() cssUrl: [
    '//unpkg.com/element-ui/lib/theme-chalk/index.css',
    './static/css/index.scss'
  ]
  @Emit()
  colorChange (e) {
    if (!e) return
    localStorage.setItem('color', e)
    this.primaryColor = this.colors.primary
    this.colors = objectAssign(
      {},
      this.colors,
      generateColors(this.colors.primary)
    )

    console.log('generateColors: ' + generateColors)
    console.log('this.colors : ' + this.colors)
    this.writeNewStyle()
  }

  @Emit()
  writeNewStyle () {
    let cssText: String = this.originalStyle
    Object.keys(this.colors).forEach(key => {
      cssText = cssText.replace(
        new RegExp('(:|\\s+)' + key, 'g'),
        '$1' + this.colors[key]
      )
    })
    if (this.originalStylesheetCount === document.styleSheets.length) {
      // 如果之前没有插入就插入
      const style = document.createElement('style')
      style.innerText =
        '.primaryColor{background-color:' + this.colors.primary + '}' + cssText
      document.head.appendChild(style)
    } else {
      // 如果之前没有插入就修改
      (document.head.lastChild as any).innerText =
        '.primaryColor{background-color:' + this.colors.primary + '}' + cssText
    }
  }

  @Emit()
  getIndexStyle (url) {
    let that = this
    let request = new XMLHttpRequest()
    request.open('GET', url)
    request.onreadystatechange = function () {
      if (
        request.readyState === 4 &&
        (request.status === 200 || request.status === 304)
      ) {
        // 调用本地的如果拿不到会得到html,html是不行的
        if (request.response && !/DOCTYPE/gi.test(request.response)) {
          that.originalStyle = that.getStyleTemplate(request.response)
          that.writeNewStyle()
        } else {
          that.originalStyle = ''
        }
      } else {
        that.originalStyle = ''
      }
    }
    request.send(null)
  }
  @Emit()
  getStyleTemplate (data) {
    const colorMap = {
      '#3a8ee6': 'shade-1',
      '#409eff': 'primary',
      '#53a8ff': 'light-1',
      '#66b1ff': 'light-2',
      '#79bbff': 'light-3',
      '#8cc5ff': 'light-4',
      '#a0cfff': 'light-5',
      '#b3d8ff': 'light-6',
      '#c6e2ff': 'light-7',
      '#d9ecff': 'light-8',
      '#ecf5ff': 'light-9'
    }
    Object.keys(colorMap).forEach(key => {
      const value = colorMap[key]
      data = data.replace(new RegExp(key, 'ig'), value)
    })
    return data
  }

  mounted () {
    // 默认从线上官方拉取最新css,2秒钟后做一个检查没有拉到就从本地在拉下
    let that = this;
    // 如果是记住用户的状态就需要，在主题切换的时候记录颜色值，在下次打开的时候从新赋值
    (this.colors.primary as any) = localStorage.getItem('color') || this.colors.primary
    this.getIndexStyle(this.cssUrl[0])
    setTimeout(function () {
      if (that.originalStyle) {
        return
      } else {
        that.getIndexStyle(that.cssUrl[1])
      }
    }, 2000)
    this.$nextTick(() => {
      // 获取页面一共引入了多少个style 文件
      (this.originalStylesheetCount as Number) = document.styleSheets.length
    })
  }
}
</script>
